{extend name='public/base' /}

{block name="style"}
{css href="/node_modules/wangeditor/dist/css/wangEditor.min.css" /}
{css href="/static/inspinia/css/plugins/dropzone/basic.css" /}
{css href="/static/inspinia/css/plugins/dropzone/dropzone.css" /}
{/block}

{block name="breadcrumb"}
{$crumbs}
{/block}

{block name="body"}
<div class="col-lg-12">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="row">
                <div class="col-sm-8 b-r">
                    <form role="form" action="{:url('save_page')}" method="post" autocomplete="off" data-form="form">
                        <div class="form-group">
                            <label>title</label>
                            <input type="text" name="title" placeholder="title" class="form-control" value="{$page.title|default=''}">
                        </div>
                        <div class="form-group">
                            <label>标识</label>
                            <input type="text" name="make" placeholder="make" class="form-control" value="{$page.make|default=''}">
                            <span class="help-block">标识字符串请不要改动</span>
                        </div>
                        <div class="form-group">
                            <label>详细信息</label>
                            <textarea id="textarea1" style="height: 240px;;" name="content">
                                <p>{$page.content|default=''}</p>
                            </textarea>
                        </div>
                        <div>
                            <input type="hidden" name="image" value="">
                            <input type="hidden" name="id" value="{$page.id|default=0}">
                            <button class="btn btn-sm btn-primary m-t-n-xs" type="submit"><strong>确定</strong></button>
                        </div>
                    </form>
                </div>
                <div class="col-sm-4 b-r">
                    <div class="ibox-content">

                        <form id="my-awesome-dropzone" class="dropzone" action="{:url('common/upload_image', ['type' => 'page'])}" style="min-height: 160px;">
                            <div class="dropzone-previews"></div>
                            <button type="submit" class="btn btn-primary pull-right">提交</button>
                        </form>
                        <img style="max-width: 300px; max-height: 200px; margin-top: 20px;" class="image" src="/uploads/page/{$page.image|default=''}" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="javascript"}
<!-- 编辑器 -->
{js href="/node_modules/wangeditor/dist/js/wangEditor.min.js" /}
{js href="/static/inspinia/js/plugins/dropzone/dropzone.js" /}
<script>
    $(document).ready(function(){
        var editor = new wangEditor('textarea1');
        editor.create();

        Dropzone.options.myAwesomeDropzone = {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            // Dropzone settings
            init: function() {
                var myDropzone = this;

                this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                this.on("sendingmultiple", function() {
                });
                this.on("successmultiple", function(files, response) {
                    //window.location.reload();
                    console.log(files);
                    console.log(response);
                    if (response.code == 200) {
                        $('input[name="image"]').val(response.data.path);
                        $(".image").attr('src', '/uploads/page/' + response.data.path);
                    }
                });
                this.on("errormultiple", function(files, response) {
                });
            }
        }
    });
</script>
{/block}